<template>
  <div class="receivable-payable-details">
    <section class="app-main">
      <div class="module-header">
        <span class="title">庄</span>
        <span class="tips">庄港发 13726215444</span>
        <span class="money">应收总计：2100</span>
      </div>
      <div class="module-list">

        <mt-cell v-for="item in list" class="item" :label="item.date" :title="item.title" is-link @click.native="handleDetails">
          <span class="item-content">{{item.money}}</span>
        </mt-cell>
      </div>
    </section>

    <mt-popup
      v-model="popupOrderDetails"
      position="bottom" class="popup-order-details">
      <div class="popup-content">
        <dl class="information-list">
          <dd class="item">
            <span class="addon">店名：</span>天河分店1
          </dd>
          <dd class="item">
            <span class="addon">单号：</span>5949494494949449
          </dd>
          <dd class="item">
            <span class="addon">日期：</span>2019-02-10 10:40
          </dd>
          <dd class="item">
            <span class="addon">业务员：</span>店员1
          </dd>
          <dd class="item">
            <span class="addon">客户：</span>汽修贸易
          </dd>
        </dl>
      </div>

      <div class="button-content">
        <mt-button type="danger" @click="handleSure">返回</mt-button>
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import { Header,Cell,Toast,MessageBox} from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
  },
  data () {
    return {

      list:[
        {
          id:1,
          title:'卡罗拉汽车前档',
          money:'700',
          date:'2019-04-02 15:20'
        },{
          id:2,
          title:'大众汽车后挡玻璃',
          money:'500',
          date:'2019-04-02 15:20'
        },
      ],
      popupOrderDetails:false,
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
.receivable-payable-details .module-header{
  padding:32px 0;
  text-align: center;
  border-bottom:8px solid #f5f5f5;;
}
.receivable-payable-details .module-header .title{
  background: #007EE5;
  display: block;
  width:46px;
  height: 46px;
  margin:0 auto 10px;
  border-radius: 50%;
  line-height: 46px;
  color: #fff;
  font-size:20px;

  }
.receivable-payable-details .module-header .tips{
  display: block;
  font-size: 13px;
  color: #666;

  }
.receivable-payable-details .module-header .money{
  display: block;
  padding:8px 0 0;
  font-size: 22px;

}

.receivable-payable-details .module-list .item{
  min-height: 72px;
}
.receivable-payable-details .module-list .mint-cell-label{
    margin:10px 0 0;
  }
.receivable-payable-details .popup-order-details{

  }
</style>
